<template>
  <h1 class="title">hello vue3</h1>

  <p :class="className">静哥真帅</p>
  <p
    :class="{
      green: !isRed,
      red: isRed,
    }"
  >
    静哥真帅
  </p>
  <p :class="[isRed ? 'red' : 'green']">静哥真帅</p>
  <p class="color">静哥真帅</p>
  <button @click="update">更新</button>
  <div class="container">
    <Child />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Child from "./views/Child/index.vue";
/*
  样式
    class
      静态class
        class="xxx"
      动态class
        :class="{  }"
        :class="[  ]"
        :class="xxx"

    style
      静态style
        style="font-size: 20px;font-weight: 700;"
      动态style
        :style="{ fontSize: 20 }"

    样式只是有限的几种变化，可以用class
    样式无限的变化，用style
    
    给样式通过v-bind语法绑定一个动态的值

    给style标签设置scoped：让样式只对当前组件生效
      原理：
        1. 给当前组件每一个元素添加一个自定义属性 data-v-xxx
        2. 给当前组件所有样式添加一个属性选择器[data-v-xxx]
          所以当前组件的样式，就只能选中当前组件的元素，只对当前组件生效

    父组件修改子组件样式：
      1. 不加scoped，可以修改子组件样式
        问题：当前组件其他样式可能会影响其他组件
      2. 写多个style标签，需要修改子组件样式的样式，不加scoped
        问题：不加scoped的style标签就是全局样式
      3. 深度选择器 

*/
export default defineComponent({
  name: "App",
  data() {
    return {
      className: "red",
      isRed: true,
    };
  },
  methods: {
    update() {
      // this.className = this.className === "red" ? "green" : "red";
      // this.isRed = !this.isRed;
      this.className = this.className === "red" ? "green" : "red";
    },
  },
  components: {
    Child,
  },
});
</script>

<style scoped>
.title {
  color: red;
}
.red {
  color: red;
}
.green {
  color: green;
}

.color {
  color: v-bind(className);
}

/* 深度选择器 */
.container :deep(.child-content) {
  font-size: 30px;
}
</style>

<!-- <style>
.child-content {
  font-size: 30px;
}
</style> -->
